$(function() {

    map();

    leidatu();
    wuran();
    huaxing();
    zhexian();

    //大屏

    function leida1() {
        var myChart = echarts.init(document.getElementById('map'));


        myChart.setOption(option);
        window.addEventListener("resize", function() {
            myChart.resize();
        });

    }




})


function map() {
    var myChart = echarts.init(document.getElementById('map'));
    let iconRQ = "image://"

    let data = [{
            name: "北京",
            value: [116.24, 39.55, 100]
        },
        {
            name: "深圳",
            value: [114.271522, 22.753644]
        },

        {
            name: "重庆",
            value: [106.54, 29.59]
        },
        {
            name: "浙江",
            value: [120.19, 30.26]
        },
        {
            name: "上海",
            value: [121.4648, 31.2891]
        },


    ]
    let LableData = [{
            name: "北京",
            coords: [
                [116.24, 39.55, 100],
                [120.24, 46.55, 100]
            ], // 线条位置[开始位置，结束位置]
            value: [1021, 120]
        },
        {
            name: "深圳",
            coords: [
                [114.271522, 22.753644],
                [118.24, 18.55, 100]
            ], // 线条位置[开始位置，结束位置]
            value: [1021, 120]
        },
        {
            name: "重庆",
            coords: [
                [106.54, 29.59],
                [104.24, 35.55]
            ], // 线条位置[开始位置，结束位置]
            value: [1021, 120]
        },
        {
            name: "浙江",
            coords: [
                [120.19, 30.26],
                [125.24, 27.55, 100]
            ], // 线条位置[开始位置，结束位置]
            value: [1021, 120]
        },
        {
            name: "上海",
            coords: [
                [121.4648, 31.2891],
                [122.4648, 32.2891]
            ], // 线条位置[开始位置，结束位置]
            value: [1201, 60]
        },
    ];

    option = {
        /*backgroundColor: '#000f1e',*/
        geo: {
            map: 'china',
            aspectScale: 0.85,
            layoutCenter: ["50%", "50%"], //地图位置
            layoutSize: '100%',
            itemStyle: {
                normal: {
                    shadowColor: '#276fce',
                    shadowOffsetX: 0,
                    shadowOffsetY: 15,
                    opacity: 0.5,
                },
                emphasis: {
                    areaColor: '#276fce',

                }
            },
            regions: [{
                name: '南海诸岛',
                itemStyle: {
                    areaColor: 'rgba(0, 10, 52, 1)',

                    borderColor: 'rgba(0, 10, 52, 1)',
                    normal: {
                        opacity: 0,
                        label: {
                            show: false,
                            color: "#009cc9",
                        }
                    },


                },
                label: {
                    show: false,
                    color: '#FFFFFF',
                    fontSize: 12,
                },


            }],

        },
        series: [
            // 常规地图
            {
                type: 'map',
                mapType: 'china',
                aspectScale: 0.85,
                layoutCenter: ["50%", "50%"], //地图位置
                layoutSize: '100%',
                zoom: 1, //当前视角的缩放比例
                // roam: true, //是否开启平游或缩放
                scaleLimit: { //滚轮缩放的极限控制
                    min: 1,
                    max: 2
                },
                itemStyle: {
                    normal: {
                        areaColor: '#0c274b',
                        borderColor: '#1cccff',
                        borderWidth: 1.5


                    },
                    emphasis: {
                        areaColor: '#02102b',
                        label: {
                            color: "#fff"
                        }

                    }
                },


            },
            { //首都星图标
                name: '首都',
                type: 'scatter',
                coordinateSystem: 'geo',
                data: [{
                    name: '首都',
                    value: [116.24, 41.55, 100],

                }, ],
                symbol: iconRQ,
                symbolSize: 20,
                label: {
                    normal: {
                        show: false,

                    },
                    emphasis: {
                        show: false
                    }
                },

            },
            // 区域散点图
            {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                symbolSize: 10,
                rippleEffect: { //坐标点动画
                    period: 3,
                    scale: 5,
                    brushType: 'fill'
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        formatter: '{b}',
                        color: '#b3e2f2',
                        fontWeight: "bold",
                        fontSize: 16
                    }
                },

                data: data,
                itemStyle: { //坐标点颜色
                    normal: {
                        show: true,
                        color: '#ff8003',
                        shadowBlur: 20,
                        shadowColor: '#fff'
                    },
                    emphasis: {
                        areaColor: '#f00'
                    }
                },

            },


            /*{
		            name: 'lable',
		            type: 'scatter',
		            coordinateSystem: 'geo',
		            symbol: 'pin',
		            symbolSize: [50,50],
		            label: {
		                normal: {
		                    show: true,
		                    textStyle: {
		                        color: '#fff',
		                        fontSize: 9,
		                    },
		                    formatter (value){
		                        return value.data.value[1]
		                    }
		                }
		            },
		            itemStyle: {
		                normal: {
		                    color: '#D8BC37', //标志颜色
		                }
		            },
		            data: data,
		            showEffectOn: 'render',
		            rippleEffect: {
		                brushType: 'stroke'
		            },
		            hoverAnimation: true,
		            zlevel: 1
		        },*/
            {

                type: 'lines',
                zlevel: 3,
                symbol: 'circle',
                symbolSize: [5, 5],
                color: '#ff8003',
                opacity: 1,
                label: {
                    show: true,
                    padding: [10, 20],
                    color: '#fff',
                    backgroundColor: "#1a3961",
                    borderColor: '#aee9fb',
                    borderWidth: 1,
                    borderRadius: 6,
                    formatter(params) {

                        let arr = [params.name, "废水污染：" + params.value[1] + "家", "废气污染：" + params.value[0] + "家"];
                        return arr.join("\n")
                    },
                    textStyle: {
                        align: 'left',
                        lineHeight: 20,
                    }
                    /* normal: {

                         textStyle: {
                             color: '#fff',
                             fontSize: 9,
                         },
                         formatter (value){
                             return value.data.value[2]
                         },

                     }*/
                },
                lineStyle: {
                    type: 'solid',
                    color: '#fff',
                    width: 0.5,
                    opacity: 1,

                },
                data: LableData,


            },
        ]
    };

    myChart.on('click', function(params) {
        console.log(params);
    });
    myChart.setOption(option);
    window.addEventListener("resize", function() {
        myChart.resize();
    });

}


function leidatu() {

}

function wuran() {

        var myChart = echarts.init(document.getElementById('wuran'));
    	$.ajax({
    		url: '/water/findAllEnterprise',
    		type: 'get',
    		dataType: 'json',
    		success: function(response){

    			var salvProName = ["企业总数", "废气企业", "废水企业", "铅污染", "铬污染"];
    			var salvProValue = [response.data[0], response.data[1], response.data[2], response.data[3], response.data[4]];
    			var salvProMax = []; //背景按最大值
    			for (let i = 0; i < salvProValue.length; i++) {
    			    salvProMax.push(salvProValue[0])
    			}
    			option = {

    			    grid: {
    			        left: '2%',
    			        right: '2%',
    			        bottom: '-6%',
    			        top: '8%',
    			        containLabel: true
    			    },
    			    tooltip: {
    			        trigger: 'axis',
    			        axisPointer: {
    			            type: 'none'
    			        },
    			        formatter: function(params) {
    			            return params[0].name + ' : ' + params[0].value
    			        }
    			    },
    			    xAxis: {
    			        show: false,
    			        type: 'value'
    			    },
    			    yAxis: [{
    			        type: 'category',
    			        inverse: true,
    			        axisLabel: {
    			            show: true,
    			            textStyle: {
    			                color: '#fff'
    			            },
    			        },
    			        splitLine: {
    			            show: false
    			        },
    			        axisTick: {
    			            show: false
    			        },
    			        axisLine: {
    			            show: false
    			        },
    			        data: salvProName
    			    }, {
    			        type: 'category',
    			        inverse: true,
    			        axisTick: 'none',
    			        axisLine: 'none',
    			        show: true,
    			        axisLabel: {
    			            textStyle: {
    			                color: '#ffffff',
    			                fontSize: '12'
    			            },
    			        },
    			        data: salvProValue
    			    }],
    			    series: [{
    			            name: '值',
    			            type: 'bar',
    			            zlevel: 1,
    			            itemStyle: {
    			                normal: {
    			                    barBorderRadius: 30,
    			                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
    			                        offset: 0,
    			                        color: 'rgb(57,89,255,1)'
    			                    }, {
    			                        offset: 1,
    			                        color: 'rgb(46,200,207,1)'
    			                    }]),
    			                },
    			            },
    			            barWidth: 10,
    			            data: salvProValue
    			        },
    			        {
    			            name: '背景',
    			            type: 'bar',
    			            barWidth: 10,
    			            barGap: '-100%',
    			            data: salvProMax,
    			            itemStyle: {
    			                normal: {
    			                    color: 'rgba(24,31,68,1)',
    			                    barBorderRadius: 30,
    			                }
    			            },
    			        },
    			    ]
    			};

    			myChart.setOption(option);


    		}

    })
    }


function huaxing() {

}


function zhexian() {
    var myChart = echarts.init(document.getElementById('zhexian'));
	$.ajax({
		url: '/water/findMainDischarge',
		type: 'get',
		dataType: 'json',
		success: function(response){
			console.log('****************');
			var zhexian = response.data;
			var arr2015 = zhexian[0];
			var arr2016 = zhexian[1];
			var arr2017 = zhexian[2];
			var arr2018 = zhexian[3];
			var arr2019 = zhexian[4];
			var arr2020 = zhexian[5];


			dataText = [{
			        name: '上游流速',
			        type: 'line',
			        smooth: true,
			        symbolSize: 8,
			        data: [arr2015[1], arr2016[1], arr2017[1], arr2018[1], arr2019[1], arr2020[1]],
			        barWidth: '30%',
			        itemStyle: {
			            normal: {
			                color: '#f0c725'
			            }
			        }
			    }, {
			        name: '下游流速',
			        type: 'line',
			        smooth: true,
			        symbolSize: 8,
			        data: [arr2015[2], arr2016[2], arr2017[2], arr2018[2], arr2019[2], arr2020[2]],
			        barWidth: '30%',
			        itemStyle: {
			            normal: {
			                color: '#16f892'
			            }
			        }
			    },
			    {
			        name: '平均流速',
			        type: 'line',
			        smooth: true,
			        symbolSize: 8,
			        data: [arr2015[3], arr2016[3], arr2017[3], arr2018[3], arr2019[3], arr2020[3]],
			        barWidth: '30%',
			        itemStyle: {
			            normal: {
			                color: '#0BE3FF'
			            }
			        }
			    }
			]
			dataObj = {
			    year: ['2015', '2016', '2017', '2018', '2019', '2020'],
			    data: {
			        value: [{
			            name: '上游流速',
			            value: [arr2015[1], arr2016[1], arr2017[1], arr2018[1], arr2019[1], arr2020[1]]
			        }, {
			            name: '下游流速',
			            value: [arr2015[2], arr2016[2], arr2017[2], arr2018[2], arr2019[2], arr2020[2]]
			        }, {
			            name: '平均流速',
			            value: [arr2015[3], arr2016[3], arr2017[3], arr2018[3], arr2019[3], arr2020[3]]
			        }]
			    }
			}
			let dataArr = []

			dataObj.data.value.map(item => {
			    let datachild = []
			    let newArr = {
			        name: item.name,
			        type: 'line',
			        smooth: true,
			        symbolSize: 8,
			        data: item.value,
			        barWidth: '30%',
			        itemStyle: {
			            normal: {
			                color: item.name === '上游流速' ? '#f0c725' : item.name === '下游流速' ? '#0BE3FF' : '#16f892'
			            }
			        }
			    }

			    dataArr.push(newArr)
			})
			option = {
			    color: ['#f0c725', '#16f892'],
			    title: {
			        left: 'center',
			        text: '',
			        textStyle: {
			            color: '#FFFFFF',
			            fontSize: '14',
			        }
			    },
			    tooltip: {
			        trigger: 'axis',
			        axisPointer: { // 坐标轴指示器，坐标轴触发有效
			            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
			        }
			    },
			    legend: {
			        x: 'center',
			        top: '25',
			        textStyle: {
			            color: '#c1cadf',
			            "fontSize": 14
			        }
			    },
			    grid: {
			        left: '6%',
			        right: '4%',
			        top: '25%',
			        bottom: '3%',
			        containLabel: true
			    },
			    toolbox: {
			        show: true,
			        orient: 'vertical',
			        x: 'right',
			        y: 'center'
			    },
			    xAxis: [{
			        type: 'category',
			        boundaryGap: false,
			        data: dataObj.year,
			        axisLine: {
			            lineStyle: {
			                color: 'rgba(240,199,37,0.5)'
			            }
			        },
			        axisLabel: {
			            interval: 0,
			            color: '#c1cadf',
			            fontSize: '15'
			        }
			    }],
			    yAxis: [{
			        type: 'value',
			        name: '(m3)',
			        nameTextStyle: {
			            color: '#c1cadf',
			            align: 'right',
			            lineHeight: 10
			        },
			        axisLine: {
			            lineStyle: {
			                color: 'rgba(240,199,37,0.5)'
			            }
			        },
			        axisLabel: {
			            interval: 0,
			            color: '#c1cadf',
			            fontSize: '15'
			        },
			        splitLine: {
			            show: false
			        }
			    }],
			    series: dataArr
			};

			myChart.setOption(option);
			window.addEventListener("resize", function() {
			    myChart.resize();
			});
		}
		})


}
